import React, { useState, useRef, forwardRef, useEffect } from 'react';

function App() {
  const aref = useRef(null);
  useEffect(() => {
    // 获取到dom
    aref.current.click(); //点击一次子组件
  }, []);
  const func = () => {
    console.log('app');
  };

  return (
    <div>
      <A1 ref={aref} func={func}></A1>
    </div>
  );
}

// class A1 extends React.Component {
//   render() {
//     return <div>111</div>;
//   }
// }

// forwardRef
const A1 = forwardRef((props, ref) => {
  const [a, seta] = useState(0);
  // console.log(props, ref);
  useEffect(() => {
    props.func();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const click = () => {
    seta(a + 2);
  };
  return (
    <div ref={ref} onClick={click}>
      {a}
    </div>
  );
});

export default App;
